<template>
  <view>
    <table style="width:90%;height: 60vh;margin-top: 100rpx;margin-left: 5%;">
      <thead>
      <tr style="background-color: #ccc">
        <th>课程序号</th>
        <th>课程名</th>
        <th>考试成绩</th>
        <th>平时成绩</th>
        <th>排名</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.courseId }}</td>
        <td>{{ item.courseName }}</td>
        <td>{{ item.examScore }}</td>
        <td>{{ item.usualScore }}</td>
        <td>{{ item.ranks }}</td>
      </tr>
      </tbody>
    </table>

  </view>
</template>
<script>
import student from '@/api/student/index.js'
import store from '@/store'
export default {
  data() {
    return {
      tableData: [
        // {
        //   courseId: '322',
        //   courseName: '形式与政策7',
        //   examScore: 86,
        //   usualScore: 90,
        //   ranks: 16,
        // },
        // {
        //   courseId: '322',
        //   courseName: '形式与政策7',
        //   examScore: 86,
        //   usualScore: 90,
        //   ranks: 16,
        // },
        // {
        //   courseId: '322',
        //   courseName: '形式与政策7',
        //   examScore: 86,
        //   usualScore: 90,
        //   ranks: 16,
        // },
      ]
    }
  },
  methods: {
    async grade () {
      try {
        console.log(store.getters.getToken)
        console.log(store.getters.getUserInfo)
        const res = await student.getStuGrades()
        this.tableData = res.data
        // 处理响应数据
        console.log('成绩单:', res)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    }
  },
  async onLoad () {
    await this.grade()
  }
}
</script>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 16px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}
</style>